<template>
  <div class="funds-detail">
    <el-dialog v-model="dialogVisible" width="500" style="padding: 0px !important" :show-close="false">
      <template #title>
        <custom-title title="费用请款详情" showCloseIcon="true" @handleCloseDialog="dialogVisible = false" />
      </template>
      <div class="content" v-if="isLoaded">
        <div class="order-content">
          {{ detailInfo.fundApplicationNo
          }}<span
            class="status-tag"
            :style="{
              background: statusObj[detailInfo.fundApplicationStatus]?.bgColor,
              color: statusObj[detailInfo.fundApplicationStatus]?.color
            }"
            >{{ statusObj[detailInfo.fundApplicationStatus]?.text }}</span
          >
        </div>
        <!--    start refuse-reason-->
        <div class="refuse-reason" v-if="detailInfo.fundApplicationStatus == 3">
          <div class="refuse-reason__title">拒绝原因</div>
          <div class="refuse-reason__content">{{ detailInfo.errorMessage }}</div>
        </div>
        <!--    end refuse-reason-->
        <!--    start base-info-->
        <div class="base-info">
          <div class="title">基础信息</div>
          <div class="info-row">
            <div class="label">关联客户</div>
            <div class="value">{{ detailInfo.customerName }}</div>
          </div>
          <div class="info-row">
            <div class="label">关联合同</div>
            <div class="value">{{ detailInfo.contractName }}</div>
          </div>
          <div class="info-row">
            <div class="label">人工工种</div>
            <div class="value">{{ detailInfo.occupationName }}</div>
          </div>
          <div class="related-detail">
            <div class="detail-title">关联明细</div>
            <div class="detail-list" v-if="detailInfo.quotaItemList?.length">
              <div class="detail-item" v-for="item in detailInfo.quotaItemList" :key="item.itemId">
                <div>{{ item.itemName }}</div>
                <div>
                  是否发包：<span>{{ item.isOutsourced ? "是" : "否" }}</span>
                </div>
                <div>
                  金额：<span>￥{{ item.totalAmount }}</span>
                </div>
              </div>
            </div>
            <div class="no-detail-data" v-else>暂无数据</div>
          </div>
          <div class="info-row">
            <div class="label">是否发包</div>
            <div class="value">{{ detailInfo.isOutsourced ? "是" : "否" }}</div>
          </div>
          <div class="info-row">
            <div class="label">收款人</div>
            <div class="value">{{ detailInfo.payeeName }}</div>
          </div>
          <div class="info-row">
            <div class="label">请款金额</div>
            <div class="value">￥{{ detailInfo.requestedAmount }}</div>
          </div>
          <div class="info-row">
            <div class="label">已付金额</div>
            <div class="value red-font">￥{{ detailInfo.paidAmount }}</div>
          </div>
          <div class="info-row">
            <div class="label">剩余金额</div>
            <div class="value">￥{{ detailInfo.remainingAmount }}</div>
          </div>
          <div class="info-row">
            <div class="label">费用说明</div>
            <div class="value">{{ detailInfo.description }}</div>
          </div>
          <div class="info-row">
            <div class="label">上传附件</div>
            <div class="value file-list" v-if="detailInfo.attachmentList?.length">
              <div class="file-item" v-for="(item, index) in detailInfo.attachmentList" :key="item.fileId">
                <img v-if="['jpg', 'png'].includes(getFileType(item.fileName))" :src="item.fileUrl" />
                <video v-else-if="getFileType(item.fileName) == 'mp4'" :src="item.fileUrl"></video>
                <img v-else src="@/assets/images/fileFolder.png" />
                <span>{{ item.fileName }}</span>
              </div>
            </div>
            <div v-else class="no-detail-data">暂无数据</div>
          </div>
        </div>
        <!--    end base-info-->
        <!--      start payment-info-->
        <div class="payment-info">
          <div
            class="title"
            v-if="detailInfo?.paymentInfo?.paymentInfoItemList?.length || detailInfo?.deductionInfo?.paymentInfoItemList?.length"
          >
            付款信息
          </div>
          <template v-if="detailInfo?.paymentInfo?.paymentInfoItemList?.length">
            <div class="payment-total">
              实付金额 <span>¥{{ detailInfo.paymentInfo.totalAmount }}</span>
            </div>
            <div class="payment-list">
              <div class="payment-item" v-for="item in detailInfo.paymentInfo.paymentInfoItemList">
                <div class="payment-item__date">{{ item.paymentDate }}</div>
                <div class="payment-item__account">
                  {{ item.payTypeName }} <span>￥{{ item.paymentAmount }}</span>
                </div>
              </div>
            </div>
          </template>
          <template v-if="detailInfo?.deductionInfo?.paymentInfoItemList?.length">
            <div class="payment-total" style="background: #f4f4f4">
              其他扣款 <span>¥{{ detailInfo.deductionInfo.totalAmount }}</span>
            </div>
            <div class="payment-list">
              <div class="payment-item" v-for="item in detailInfo.deductionInfo.paymentInfoItemList">
                <div class="payment-item__date">{{ item.paymentDate }}</div>
                <div class="payment-item__account">
                  {{ item.payTypeName }} <span>￥{{ item.paymentAmount }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!--      end payment-info-->
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { requestFundsDetail } from "@/apis/requestsFunds";
import { getFileType } from "@/utils/index";
import { statusObj } from "../../config";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  currentApplicationNo: {
    type: String,
    default: ""
  }
});
const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const emit = defineEmits(["update:modelValue", "initiatePaymentSave"]);

const detailInfo = ref({});
const isLoaded = ref(false);
const getDetail = async () => {
  isLoaded.value = false;
  const { data } = await requestFundsDetail({ fundApplicationNo: props.currentApplicationNo });
  detailInfo.value = data;
  isLoaded.value = true;
};
getDetail();
</script>

<style scoped lang="scss">
@import "index";
</style>
